<template>
  <!-- 新增录入画面对话框-->
  <el-dialog
    :title="form.title"
    center
    :visible.sync="openState"
    width="1024px"
    :close-on-click-modal="false"
    @close="closeFn"
  >
    <el-form ref="editForm" :model="form" label-width="110px" disabled>
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>交易流水信息</span>
        </div>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="记账记录ID" prop="entryId">
              <el-input v-model="form.entryId" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记录日期" prop="recordDate">
              <el-date-picker v-model="form.recordDate" style="width: 100%;" type="date" value-format="yyyyMMdd" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="交易参考号" prop="txnId">
              <el-input v-model="form.txnId" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="文件参考号" prop="fileRef">
              <el-input v-model="form.fileRef" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="记账状态" prop="status">
              <el-select style="width: 100%;" v-model="form.status" placeholder="记账状态">
                <el-option
                  v-for="dict in dictMap.FEE_TRANS_DETAIL_STATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="费项代码" prop="feeCode">
              <el-input v-model="form.feeCode" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="本金账号" prop="accountNo">
              <el-input v-model="form.accountNo" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手续费账号" prop="feeAccountNo">
              <el-input v-model="form.feeAccountNo" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="手续费币种" prop="currency">
              <el-input v-model="form.currency" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手续费优惠前金额" prop="feeAmount">
              <ht-amount-input
                v-model="form.feeAmount"
                placeholder="手续费优惠前金额"
                :disable=true
              ></ht-amount-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手续费优惠后金额" prop="feeDiscountsAmount">
              <ht-amount-input
                v-model="form.feeDiscountsAmount"
                placeholder="手续费优惠后金额"
                :disable=true
              ></ht-amount-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { approve, reject, detailsApiUrlConfig } from "@/api/cnaps/tips/FeeItemManage/FeeManageApprove.js";
import HtAmountInput from "@/views/components/HtAmountInput";

export default {
  name: "EditInfo",
  components: {HtAmountInput},
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {},
  data() {
    return {
      isLoading: false,
      // 是否显示弹出层
      openState: false,
      reqConfig: detailsApiUrlConfig,
      queryParams: {
        manageType: "",
        feeCode: "",
        feeId: "",
      },

      tableBindColumns: [
        { label: `起始金额`, prop: "lowAmt", align: "center" },
        {
          label: `截止金额`,
          prop: "highAmt",
          align: "center",
        },
        {
          label: `段内最低手续费`,
          prop: "sFeeMin",
          align: "center",
          formatter: (row) => {
            if (!row.sFeeMin) {
              return "-";
            } else {
              return row.sFeeMin;
            }
          },
        },
        {
          label: `段内最高手续费`,
          prop: "sFeeMax",
          align: "center",
          formatter: (row) => {
            if (!row.sFeeMax) {
              return "-";
            } else {
              return row.sFeeMax;
            }
          },
        },
        {
          label: `固定金额`,
          prop: "fixAmt",
          align: "center",
        },
        {
          label: `收费模式`,
          prop: "feeType",
          align: "center",
          dictCode: "FEE_TYPE",
        },
        {
          label: `比例(%)`,
          prop: "rate",
          align: "center",
        },
      ],
    };
  },
  watch: {
    form: {
      handler(newValue) {
        if (newValue.segmtFlg === "1") {
          this.$nextTick(() => {
            this.$set(this.queryParams, "id", newValue.id);
            this.$set(this.queryParams, "manageType", newValue.manageType);
            this.$set(this.queryParams, "feeCode", newValue.feeCode);
            this.$set(this.queryParams, "feeId", newValue.feeId);
            this.$refs.dataTable1.doQuery();
          });
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 表单重置
    reset() {
      this.resetForm("editForm");
    },
    closeFn() {
      this.openState = false;
      this.reset();
    },

    show() {
      this.openState = true;
    },
    // 审核方法
    approveFn() {
      this.isLoading = true;
      approve({ ...this.form })
        .then((res) => {
          this.isLoading = false;
          this.$emit("editComplete", true);
          this.msgSuccess("已审核!");
          this.closeFn();
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
    // 拒绝方法
    rejectFn() {
      this.isLoading = true;
      reject(this.form)
        .then((res) => {
          this.isLoading = false;
          this.$emit("editComplete", true);
          this.msgSuccess("已拒绝!");
          this.closeFn();
        })
        .catch((err) => {
          this.isLoading = false;
        });
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
